@import '/src/theme/mixins/amixin';
@import '/src/theme/variable/breakpoint';
.search-box {
  @apply w-[150px];
  form {
    @apply relative w-full h-[38px] overflow-hidden box-border;
    @include border-radius(200px, 200px, 200px, 200px);
    > .js-form-type-search {
      @apply h-9 m-0;
    }
  }

  input[type='search'] {
    @apply h-full w-full text-sm;
    border: medium none;
    padding: 1px 20px 0 40px;
    @include border-radius(200px, 200px, 200px, 200px);
    &:active,
    &:focus {
      @apply shadow-none outline-none;
    }
  }

  .mat-icon {
    @apply p-0 absolute left-[11px] top-[11px] cursor-pointer w-5 h-5 text-xl leading-none;
  }
  @media #{$gt-md} {
    @apply w-[180px];
  }
}
